export const Pie3 = () => {
  return `
 
 
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});
onMounted(() => {
  getEcharts();
});

const getEcharts = () => {
const colorList1 = ['#00e4ff', '', '#1f77ee', '', '#f7b31d', '',]
const colorList2 = ['#0db0c3', '', '#0e51ab', '', '#ab7a0e', '',]
const colorList3 = ['#098c9c', '', '#084290', '', '#906508', '',]
let total = 0
let dataList = []
const moduleContent = { '村务': 204, '财务': 310, '党务': 84 }
let sum = 0
const chartdata = []
for (const i in moduleContent) {
   chartdata.push({
      name: i,
      value: moduleContent[i] || 1
   })
   sum += Number(moduleContent[i] || 0)
}
total = sum
dataList = chartdata
const data1 = []
chartdata.forEach((item) => {
   const _item = { ...item }
   if (!_item.value) {
      _item.value = sum / 100
   }
   data1.push(_item, {
      name: '',
      value: sum / 100,
      label: { show: false },
      itemStyle: {
         color: 'transparent'
      }
   })
})

  let myChart = echarts.init(document.getElementById("huikuan-echarts"));
  let option ={
   backgroundColor: '#00266b',
   title: {
      text: '608',
      subtext: \`总数\`,
      top: '46%',
      left: 'center',
      itemGap: 15,
      textStyle: {
         color: '#ffffff',
         fontSize: 30,
         fontWeight: 400
      },
      subtextStyle: {
         color: 'rgba(211, 228, 254, 1)',
         fontSize: 14,
         fontWeight: 400
      }
   },
   series: [
      {
         type: 'pie',
         radius: ['45%', '60%'],
         center: ['50%', '50%'],
         minAngle: 5,
         labelLine: {
            show: false
         },
         label: {
            show: true,
            alignTo: 'labelLine',
            position: 'outside',

            rich: {
               name: {
                  color: '#ffffff',
                  fontSize: 12,
                  fontWeight: 400,
                  padding: [0, 0, 0, 10]
               },
               zb: {
                  color: '#fff',
                  fontWeight: 400,
                  fontSize: 12,
                  align: 'left',
                  padding: [14, 0, 0, 24]
               },
               dot: {
                  backgroundColor: 'auto',
                  width: 14,
                  height: 14,
                  padding: [0, 0, 0, 0],
                  verticalAlign: 'top'
               }
            },
            formatter: (params) => {
               const x = params.dataIndex
               return '{dot|}' + '{name|' + params.data.name + '}' + '\\n' + '{zb|' + params.data.value + '}'
            }
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList1[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 666
      },
      {
         type: 'pie',
         radius: ['45%', '35%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         minAngle: 5,
         emphasis: { scale: false },
         label: {
            show: false
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList2[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 1
      },
      {
         type: 'pie',
         radius: ['25%', '35%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         minAngle: 5,
         emphasis: { scale: false },
         label: {
            show: false
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList3[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 1
      }
   ]
}

  myChart.setOption(option);
};
const count = ref(0);
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>

  
  
  
  `;
};
